<div class="layui-fluid" id="files-table" lay-title="附件管理">
	<div class="layui-row layui-col-space10">
		<div class="layui-col-md9">
			<div class="layui-card">
				<div class="layui-card-body nepadmin-table-full">
					<div class="layui-btn-container nepadmin-pad-t10 nepadmin-pad-l10">
						<div class="layui-btn layui-btn-sm layui-btn-primary table-action" data-type="batchDelect">删除</div>
						<div class="layui-btn layui-btn-sm layui-btn-primary table-action" data-type="refresh">刷新页面</div>
					</div>
					<table id="files-list" lay-filter="files-list"></table>
				</div>
			</div>
		</div>
		<div class="layui-col-md3">
			<div class="layui-card layui-form">
				<div class="layui-card-header">上传新的附件</div>
				<div class="layui-card-body layui-row layui-col-space12">
					<div class="layui-row file-show" style="text-align: center;display:none"">
                            <div class="
					 layui-inline">
						<img id="tupian" style="width:300px;">
					</div>
				</div>

				<div class="layui-card-header" style="text-align: center;"><button type="button" class="layui-btn layui-btn layui-btn-normal"
					 id="shangchuan"><i class="layui-icon"></i>点击这里上传文件</button>
				</div>
			</div>
		</div>
	</div>
	<script type="text/html" id="TPL-files-type">
		{{#
        var imgUrl = {
            jpg:d.path,
			jpeg:d.path,
			png:d.path,
			gif:d.path
        }[d.type];
		if(typeof(imgUrl) == "undefined" && d.type){
		    imgUrl = 'default/'+d.type+'.png';
		}
    }}
    <span><img src="{{ layui.uploadUrl+imgUrl }}" style="width:40px;"></span>
  </script>
</div>
<script>
	var getTable, search;
	layui.use(['admin', 'table', 'form', 'dropdown', 'jquery', 'laytpl', 'clipboard'], function(admin, table, form,
		dropdown, $,
		laytpl, clipboard) {

        // 复制
		let clipboard2 = new clipboard('.copyurl'); //通过类名.btn的元素实例化
		clipboard2.on('success', function(e) {
			layui.layer.msg('复制链接成功');
		});

		// 这两个值都要改
		var view = $('#files-table');
		var tableFilter = 'files-list';
		// 时间戳要乘以1000，这里要使用毫秒时间戳
		//console.log(layui.util.toDateString(1584408303*1000));
		var cols = [
			[{
					title: '',
					type: 'checkbox',
					fixed: true,
					width: 60
				}, {
					title: '操作',
					templet: '<p><span"><a class="copyurl" data-clipboard-text="{{ layui.uploadUrl+d.path }}"><i class="layui-icon layui-icon-file-copy" style="font-size: 25px;"></i></a></span></p>',
					width: 60
				},
				{
					title: '文件ID',
					field: 'id',
					width: 80
				},
				{
					title: '文件路径',
					field: 'path',
					minWidth: 400
				},
				{
					title: '文件类型',
					templet: '#TPL-files-type',
					minWidth: 60
				},
				{
					title: '文件md5值',
					field: 'file_md5',
					minWidth: 200
				},
				{
					field: 'time',
					title: '上传时间',
					templet: '<p><span title="{{d.cdat}}" class="nepadmin-c-gray">{{ layui.util.timeAgo(d.cdat*1000)}}</span></p>',
					align: 'center',
					width: 170,
					sort: true
				}
			]
		];

		var operaUrl = layui.api.files;
		var colsApi = operaUrl + 'list';
		var colsTable = cols;
		
		// 取缓存页数
        var storage = window.localStorage;
        var tablePage = storage.getItem(tableFilter);
		if(!tablePage){
		    tablePage = 1;
		}
		
		// 分类列表
		getTable = function() {
			table.render({
				elem: '[lay-filter="' + tableFilter + '"]',
				url: colsApi,
				height: 'full-165',
				cols: colsTable ,
			    page: { curr: tablePage }
			});
		}
		getTable();
		// 提交搜索
		search = function(field) {
			table.render({
				elem: '[lay-filter="' + tableFilter + '"]',
				url: colsApi,
				where: field,
				height: 'full-165',
				cols: colsTable
			});
		}
		form.on('submit(files-submit-form)', function(data) {
			var field = data.field;
			search(field);
			return false;
		});

		// 初始化表单
		form.render();

		// 操作
		function operation(type, data, msg) {
			if (!msg) {
				msg = '操作';
			}
			admin.post({
				url: operaUrl + type,
				data: data,
				success: function(result) {
					layer.alert(msg + '成功', {
						title: '操作提示',
						time: 0, //不自动关闭
						btn: ['确定'],
						yes: function(index) {
							layer.close(index);
							getTable();
						}
					});
				}
			});
		};

		// 多选操作
		view.find('.table-action').click(function() {
			let type = $(this).attr('data-type');
			if (type == 'refresh') {
				//刷新当前页
				getTable();
				//刷新一个指定页，不用传入页面的参数
				//layui.view.tab.refresh('/index')
				return false;
			}
			let data = table.checkStatus(tableFilter).data;
			let res = {};
			// 获取主键,即第一个值
			function getid(data) {
				for (var zid in data) {
					return zid;
				}
			}
			let idname = getid(data[0]);
			layui.each(data, function(index, item) {
				// 这里要改成主键id
				res[index] = item[idname];
			});
			let checkedCount = data.length;
			if (checkedCount == 0) {
				layer.msg('请先选择一行数据');
			} else {
				if (type == 'batchDelect') {
					layer.confirm('极度危险操作，删除后无法恢复数据', {
						skin: 'layui-layer-hong',
						title: '提示',
						btn: ['删了', '不删']
					}, function() {
						operation(type, res);
					}, function(index) {
						layer.close(index);
					})
				} else {
					operation(type, res);
				}
			}
		});
	});
</script>
<script>
	let $ = layui.$;
	let header =  layui.admin.getHeadToken();
	// 上传案例
	let up = new fcup({

		id: "shangchuan", // 绑定id

		url: layui.api.upload, // url地址

		checkurl: layui.api.checkUpload, // 检查上传url地址

		type: "", // 限制上传类型，为空不限制

		shardsize: "0.1", // 每次分片大小，单位为M，默认1M

		minsize: '', // 最小文件上传M数，单位为M，默认为无

		maxsize: "50", // 上传文件最大M数，单位为M，默认200M

		headers: header, // 附加的文件头

		// apped_data: {}, //每次上传的附加数据

		// 定义错误信息
		errormsg: {
			1000: "未找到该上传id",
			1001: "类型不允许上传",
			1002: "上传文件过小",
			1003: "上传文件过大",
			1004: "请求超时"
		},

		// 开始事件                
		start: () => {
			console.log('开始上传');
		},

		// 等待上传事件，可以用来loading
		beforeSend: () => {
			console.log('等待请求中');
		},

		// 上传进度事件
		progress: (num, other) => {
			console.log(num);
			console.log('上传进度' + num);
			console.log("上传类型" + other.type);

			// 以下仅作参考,并不是太准确		 
			console.log("已经上传" + other.current);
			console.log("剩余上传" + other.surplus);
			console.log("已用时间" + other.usetime);
			console.log("预计时间" + other.totaltime);
		},

		// 错误提示
		error: (msg) => {
			layui.layer.alert(msg);
		},
		// 检查地址回调,用于判断文件是否存在,类型,当前上传的片数等操作
		checksuccess: (res) => {

			let data = res ? eval('(' + res + ')') : '';

			let code = data.code;

			let url = data.data.url;

			let msg = data.msg;

			let index = data.data.file_index ? parseInt(data.data.file_index) : 0;

			// 错误提示
			if (code == 1) {
				layui.layer.alert(msg);
				return false;
			}

			// 已经上传
			if (code == 2) {
				let strnum = url.lastIndexOf("/");
				let file_name = url.substr(strnum + 1);
				search({
					path: file_name
				});
				return false;
			}

			// 如果提供了这个参数,那么将进行断点上传的准备
			if (index != 0) {
				// 设置上传切片的起始位置		   
				up.setshard(index);
			}

			// 如果接口没有错误，必须要返回true，才不会终止上传
			return true;
		},
		// 上传成功回调，回调会根据切片循环，要终止上传循环，必须要return false，成功的情况下要始终要返回true;i
		success: (res) => {

			let data = res ? eval('(' + res + ')') : '';

			let msg = data.msg;

			let url = data.data.url + "?" + Math.random();

			let code = data.code;

			// 错误提示
			if (data.code == 1) {
				layui.layer.alert(msg);
				return false;
			}

			// 成功上传
			if (data.code == 2) {
				//刷新当前页
				getTable();
				layui.layer.alert('上传完成');
			}

			// 如果接口没有错误，必须要返回true，才不会终止上传循环
			return true;
		}
	});
</script>
